<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
        <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

        <link rel="stylesheet" href="css/animate.css" type="text/css" />
        <link rel="stylesheet" href="css/common.css" type="text/css" />
	</head>
	<body>
        <div class="pop-bg-share" id="popShare">
            <div class="pop-box-share"><img src="images/share.png" alt="" /></div>
        </div>

        <div class="pop-bg show">
            <div class="pop-box small" id="accept" style="display: block;">
                <img class="pop-close" src="images/pop_close_icon.png" alt="" />
                <img class="congratulations-title" src="images/congratulations_title.png" alt="" />
                <div class="pop-box-content acc">
                    <p>获得一把由</p>
                    <p>这里是微信昵称昵称</p>
                    <p>送出的福锁</p>
                    <img class="pop-lock" src="images/lock_tongxin.png" alt="" />
                    <div class="pop-btn-box flex">
                        <div class="refuse-btn"></div>
                        <div class="accept-btn"></div>
                    </div>
                    <div class="my-lock-btn"><img src="images/my_lock_btn.png" alt="" /></div>
                </div>
            </div>

            <div class="pop-box small" id="gift">
                <img class="pop-close" src="images/pop_close_icon.png" alt="" />
                <img class="congratulations-title" src="images/congratulations_title.png" alt="" />
                <div class="pop-box-content acc">
                    <p>您已集齐福锁，将获得</p>
                    <p>电视果4K AI人工智能投屏器</p>
                    <p>及爱奇艺会员一个月</p>
                    <img class="pop-lock" src="images/gift_img_box.png" style="margin: .4rem auto; width: 4.18rem;" alt="" />
                    <div class="pop-btn-box flex">
                        <div class="receive-btn" id="receive"></div>
                    </div>
                </div>
            </div>

            <div class="pop-box pop-game-over" id="form">
                <img class="pop-close" src="images/pop_close_icon.png" alt="" />
                <div class="pop-box-title">填写信息</div>
                <p>快来完善收获信息坐等礼品到家</p>
                <div class="pop-input-box flex">
                    <div>姓　　名</div>
                    <input type="text" />
                </div>
                <div class="pop-input-box flex">
                    <div>电　　话</div>
                    <input type="text" />
                </div>
                <div class="pop-input-box flex">
                    <div>收货区域</div>
                    <input type="text" />
                </div>
                <div class="pop-input-box textarea flex">
                    <div>收货地址</div>
                    <textarea name="" id=""></textarea>
                </div>
                <div class="form-submit-btn pop-confirm"></div>
            </div>

            <div class="pop-box small" id="group">
                <img class="pop-close" src="images/pop_close_icon.png" alt="" />
            </div>

            <div class="pop-box small" id="group1">
                <img class="pop-close" src="images/pop_close_icon.png" alt="" />
            </div>

            <div class="pop-box small redbag" id="redbag">
                <div class="pop-box-redbag">
                    <h1>恭喜你</h1>
                    <p>获得1.98元<br />现金红包</p>
                </div>
                <div class="pop-btn-box flex">
                    <div class="receive-btn pop-confirm"></div>
                </div>
            </div>

            <div class="pop-box" id="ruleShow">
                <img class="pop-close" src="images/pop_close_icon.png" alt="" />
                <div class="pop-box-title">活动规则</div>
                <div class="pop-box-content">
                    <p>活动时间：</p>
                    <p>2021年1月20日—2月26日（农历元宵节）</p>
                    <p>活动规则：</p>
                    <p>❶ 玩家在游戏过程中有机会获得红包道具，领取现金红包，每位唯一用户在活动期间仅能领取一次现金红包。</p>
                    <p>❷ 每人每天可以有三次机会邀请好友复活自己。</p>
                    <p>❸ 玩家可实时查看积分榜、红包记录以及福锁榜排名。（积分榜显示为当前积分前50名的玩家，红包记录显示为实时领取到红包的50位玩家，福锁榜显示为前50名集齐福锁的玩家）。</p>
                    <p>❹ 活动结束后，将在【光明营养知食说】推文中公布获奖者(最好将时间定下)，以及发放奖品事宜。</p>
                    <p>❺ 禁止通过非正规途径，进行刷分等违规行为，一经发现，将取消游戏得分和获奖资格。</p>
                    <p>❻ 活动期间获得的奖品和红包，需要用户于活动期间内在【我的好礼】中自行兑换，若不兑换则视为主动放弃奖品。实物奖品不可退换、转换、转让或折换现金及其他任何权益。</p>
                </div>
            </div>

            <div class="pop-box pop-game-over" id="custom">
                <img class="pop-close" src="images/pop_close_icon.png" alt="" />
                <div class="pop-box-title">个性分享</div>
                <div class="pop-input-box flex" id="titleShow">
                    <div>标题：</div>
                    <p></p>
                </div>
                <div class="title-show-box"></div>
                <div class="pop-input-box textarea flex">
                    <div>简介：</div>
                    <textarea name=""></textarea>
                </div>
                <div class="confirm-share-btn"></div>
            </div>

            <div class="pop-box pop-game-over" id="proInfo">
                <img class="pop-close" src="images/pop_close_icon.png" alt="" />
                <div class="pop-box-title" style="margin-top: .43rem;">了解益固</div>
                <img src="images/product_info_img.png" width="90%" alt="" style="margin: .85rem auto 0;" />
            </div>
        </div>

        <div class="page rank">
            <img class="rank-left-top" src="images/rank_left_top_img.png" alt="" />
            <div class="more_lock_btn"></div>
            <div class="rank-gift-share-btn"></div>
            <div class="rank-gift-container">
                <div class="rank-gift-box">
                    <div class="rank-box-nav gift flex">
                        <div class="rank-box-nav-item onthis">我的福锁</div>
                        <div class="rank-box-nav-item">我的奖品</div>
                    </div>
                    <div class="rank-box-content gift" id="lock">
                        <div class="my-lock-show-box">
                            <img id="lockShow" src="images/lock_tongxin.png" alt="" />
                            <div class="change-lock-btn animated infinite pulse slow"></div>
                        </div>
                        <div class="my-lock-choose-box flex">
                            <div class="my-lock-choose-box-item onthis">
                                <em>3</em>
                                <img src="images/lock_tongxin.png" alt="" />
                                <div class="lock-name">同心锁</div>
                            </div>
                            <div class="my-lock-choose-box-item">
                                <em>1</em>
                                <img src="images/lock_fugui.png" alt="" />
                                <div class="lock-name">富贵锁</div>
                            </div>
                            <div class="my-lock-choose-box-item">
                                <em>1</em>
                                <img src="images/lock_jiankang.png" alt="" />
                                <div class="lock-name">健康锁</div>
                            </div>
                            <div class="my-lock-choose-box-item">
                                <em>1</em>
                                <img src="images/lock_shiye.png" alt="" />
                                <div class="lock-name">事业锁</div>
                            </div>
                            <div class="my-lock-choose-box-item yg">
                                <em>1</em>
                                <img src="images/lock_gugai.png" alt="" />
                                <div class="lock-name">固钙锁</div>
                            </div>
                        </div>
                        <div class="my-all-lock-btn"></div>
                    </div>
                    <div class="rank-box-content" id="giftShow" style="display: none;">
                        <div class="rank-box-content-list">
                            <div class="rank-box-content-list-item gift">
                                <div class="rank-box-content-list-rank">集齐福锁</div>
                                <div class="rank-box-content-list-name">
                                    <h1>加骨劲礼盒</h1>
                                    <p>德国WMF料理机+</p>
                                    <p>试吃装益固奶粉</p>
                                </div>
                                <button class="giftReceive"></button>
                            </div>
                            <div class="rank-box-content-list-item gift">
                                <div class="rank-box-content-list-rank">福锁榜</div>
                                <div class="rank-box-content-list-name">
                                    <h1>健康加骨劲礼包</h1>
                                    <p>一个月光明随心订+</p>
                                    <p>益固奶粉</p>
                                </div>
                                <button class="giftReceive"></button>
                            </div>
                            <div class="rank-box-content-list-item gift">
                                <div class="rank-box-content-list-rank">三等奖</div>
                                <div class="rank-box-content-list-name">
                                    <h1>办公室加热水杯</h1>
                                </div>
                                <button class="giftReceive"></button>
                            </div>
                            <div class="rank-box-content-list-item gift">
                                <div class="rank-box-content-list-rank">红包</div>
                                <div class="rank-box-content-list-name">
                                    <h1>现金0.98元</h1>
                                </div>
<!--                                <button disabled class="redbagReceive"></button>-->
                                <button class="redbagReceive"></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="rank-gift-btn-box flex">
                <div class="rule-btn" id="rule"></div>
                <div class="info-btn" id="info"></div>
                <div class="back-btn" id="back"></div>
            </div>
            <img class="rank-gift-left-cow" src="images/rank_gift_left_cow_img.png" alt="" />
            <img class="rank-gift-right-cow" src="images/rank_gift_right_cow_img.png" alt="" />
        </div>

        <script type="text/javascript" src="js/jquery-2.1.0.js"></script>
        <script type="text/javascript">
            $('.more_lock_btn').click(function (e) {
                $('.pop-bg').addClass('show');
                $('#group').show();
            })

            $('#popShare').click(function (e) {
                $('#popShare').removeClass('show');
                $('#popShare').find('.pop-box').hide();
            })

            $('#info').click(function (e) {
                $('.pop-bg').addClass('show');
                $('#proInfo').show();
            });

            $('.confirm-share-btn').click(function (e) {
                $('.pop-bg').removeClass('show');
                $('#custom').hide();
                $('#popShare').addClass('show');
            });

            $('.rank-gift-share-btn').click(function (e) {
                $('.pop-bg').addClass('show');
                $('#custom').show();
            });

            $('.pop-confirm').click(function () {
                $('.pop-bg').removeClass('show');
                $('.pop-box').hide();
            })

            $('.redbagReceive').click(function (e) {
                $('.pop-bg').addClass('show');
                $('#redbag').show();
            })

            $('.giftReceive').click(function (e) {
                $('.pop-bg').addClass('show');
                $('#form').show();
            })

            $('.change-lock-btn').click(function (e) {
                $('.pop-bg').addClass('show');
                $('#group1').show();
            })

            $('#receive').click(function (e) {
                $('#gift').hide();
                $('#form').show();
            })

            $('.my-all-lock-btn').click(function (e) {
                $('.pop-bg').addClass('show');
                $('#gift').show();
            })

            $('.my-lock-btn').click(function (e) {
                //我的福锁
                $('.pop-bg').removeClass('show');
                $('.pop-box').hide();
            })

            $('.accept-btn').click(function (e) {
                // 开心收下
                $('.pop-bg').removeClass('show');
                $('.pop-box').hide();
            });

            $('.refuse-btn').click(function (e) {
                // 残忍拒绝
                $('.pop-bg').removeClass('show');
                $('.pop-box').hide();
            });

            $('.my-lock-choose-box-item').click(function (e) {
                $('.my-lock-choose-box-item').removeClass('onthis');
                $(this).addClass('onthis');
                $('#lockShow').attr('src',$(this).find('img').attr('src'));
                if ($(this).hasClass('yg')){
                    $('#lockShow').parent().addClass('yg');
                }else{
                    $('#lockShow').parent().removeClass('yg');
                }
            })

            $('.rank-box-nav-item').click(function (e){
                $('.rank-box-nav-item').removeClass('onthis');
                $(this).addClass('onthis');
                $('.rank-box-content').hide();
                switch ($(this).index()){
                    case 0:
                        $('#lock').show();
                        break;
                    case 1:
                        $('#giftShow').show();
                        break;
                }
            });

            $('.pop-close').click(function (e) {
                $('.pop-bg').removeClass('show');
                $('.pop-box').hide();
            });

            $('#back').click(function (e){
                window.location.href = "index.html";
            });

            $('#rule').click(function (e){
                $('.pop-bg').addClass('show');
                $('#ruleShow').show();
            });

            $(document).ready(function (e) {
                addWishItem();
                setInterval(addWishItem, 2000);
            });

            let randomPosition;
            let randomItem = 0;
            function wishItemTapFun(obj) {
                console.log(obj.attr('id'));
                obj.remove();
                $('#titleShow').find('p').html(obj.html());
            }

            function addWishItem() {
                let randomPositionNew = Math.ceil(Math.random()*3);
                if (randomPosition == randomPositionNew) {
                    addWishItem();
                    return;
                }
                randomPosition = randomPositionNew;
                randomItem++;
                $('.title-show-box').append('<div class="title-show-item position' + randomPositionNew + '" id="' + randomItem + '" onclick="wishItemTapFun($(this))">这里是标题文字</div>');
                $('#'+ randomItem).animate({left: '-100%'}, {duration: 20000, easing: 'linear'},function () {
                    $(this).remove();
                });
            }
        </script>
	</body>
</html>
